<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
    
        <script type="text/javascript" src="../jsrelaxngvalidator/jssaxparser-1.1/AttributesImpl.js"></script>
        <script type="text/javascript" src="../jsrelaxngvalidator/jssaxparser-1.1/sax.js"></script>
		<script type="text/javascript" src="../jsrelaxngvalidator/dom_utils.js"></script>
		<script type="text/javascript" src="../jsrelaxngvalidator/applyXslt.js"></script>
        <script type="text/javascript" src="../jsrelaxngvalidator/datatype_library.js"></script>
		<script type="text/javascript" src="../jsrelaxngvalidator/relaxng_validator.js"></script>
		<script type="text/javascript" src="../jsrelaxngvalidator/validator_functions.js"></script>
		<script type="text/javascript" src="../jsrelaxngvalidator/validator_objects.js"></script>
		<script type="text/javascript">
		
		var xml = loadXMLDoc("xml/one_element_ns_valid.xml");
		
		var relaxng = loadXMLDoc("schemas/one_element.rng");
		
		var stepIndex = 0;
		
		var stepDisplayed = -1;
		
		var idChildNode = 'childNode_step';
		var idPattern = 'pattern_step';
		
        function validateXml(result, sax_events) {
			var result = document.getElementById(result);
			var sax_events = document.getElementById(sax_events);
			sax_events.innerHTML = "";
			
			var relaxNGValidator = new RelaxNGValidator(result, sax_events, relaxng);
			var saxParser = new SAXParser(relaxNGValidator);
			relaxNGValidator.setSaxParser(saxParser);
			saxParser.parseString(xml);
		}
		
		function recordStep(message, pattern, childNode) {
			var patternDiv = document.createElement('div');
			patternDiv.id = idPattern + stepIndex;
			patternDiv.innerHTML = "<h4>" + message + "</h4>" + pattern.toHTML();
			patternDiv.style.display = 'none';
			document.getElementById('pattern').appendChild(patternDiv);
			var childNodeDiv = document.createElement('div');
			childNodeDiv.id = idChildNode + stepIndex;
			childNodeDiv.innerHTML = childNode.toHTML();
			childNodeDiv.style.display = 'none';
			document.getElementById('childNode').appendChild(childNodeDiv);
			stepIndex++;
		}
		
		function seePreviousStep() {
			if (stepDisplayed > 0) {
				document.getElementById(idChildNode + stepDisplayed).style.display = 'none';
				document.getElementById(idPattern + stepDisplayed).style.display = 'none';
				stepDisplayed--;
				document.getElementById(idChildNode + stepDisplayed).style.display = '';
				document.getElementById(idPattern + stepDisplayed).style.display = '';
			}
		}
		
		function seeNextStep() {
			if (stepDisplayed > -1) {
				document.getElementById(idChildNode + stepDisplayed).style.display = 'none';
				document.getElementById(idPattern + stepDisplayed).style.display = 'none';
			}
			stepDisplayed++;
			var childNodeToDisplay = document.getElementById(idChildNode + stepDisplayed);
			var patternToDisplay = document.getElementById(idPattern + stepDisplayed);
			if (childNodeToDisplay && patternToDisplay) {
				childNodeToDisplay.style.display = '';
				patternToDisplay.style.display = '';
			} else {
				stepDisplayed--;
			}
		}
		
		function showDebug(checkbox) {
			if (checkbox.checked == true) {
				document.getElementById('debug').style.display = '';
			} else {
				document.getElementById('debug').style.display = 'none';
			}
		}
		
		</script>
		
		<style type="text/css">
			table {
				border: solid 1px;
				font-size: x-small;
			}
		</style>
		
	</head>
	
	<body>
        <input class="execute" type="button" value="Validate XML" onclick="validateXml('validation_result', 'sax_events')" />
        <div id="validation_result"></div>
        <input type="checkbox" onclick="showDebug(this)"/>Show debug messages.
        <div id="debug" style="display: none">
            <h4><span class="grey">SAX </span><span class="yellow">events</span></h4>
            <div id="sax_events"></div>
            <h4><span class="grey">steps of </span><span class="yellow">validation</span></h4>
            <input type="button" value="see previous step" onclick="seePreviousStep()"/>
            <input type="button" value="see next step" onclick="seeNextStep()"/>
            <div id="steps">
                <h4><span class="grey">validation </span><span class="yellow">pattern</span></h4>
                <div id="pattern"></div>
                <h4><span class="grey">child node </span><span class="yellow">being validated</span></h4>
                <div id="childNode"></div>
            </div>
        </div>
	</body>
</html>